<template>
    <div class="white-box">
        <title-more title="会员导出" />
        <div class="task-one" style="padding-left: 80px">
            <div class="task-one__item" style="width: 100%">
                <span class="task-one__label">是否消费：</span>
                <el-radio-group v-model="pay_status">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                </el-radio-group>
            </div>
            <div class="task-one__item" style="width: 100%">
                <span class="task-one__label">会员等级：</span>
                <el-select v-model="level_id" clearable placeholder="请选择会员等级">
                    <el-option :label="item.level_name" :value="item.grade_id" v-for="item in level_arrs" :key="item.grade_id" />
                </el-select>
            </div>
            <div class="task-one__item" style="width: 100%">
                <span class="task-one__label">会员状态：</span>
                <el-select v-model="black_status" clearable placeholder="请选择会员状态">
                    <el-option label="正常" value="0" />
                    <el-option label="黑名单" value="1" />
                </el-select>
            </div>
            <div class="task-one__item" style="width: 100%">
                <span class="task-one__label">标签分组：</span>
                <el-select v-model="tag_id" clearable placeholder="请选择标签分组">
                    <el-option :label="item.title" :value="item.tag_id" v-for="item in tag_arrs" :key="item.tag_id" />
                </el-select>
            </div>
            <div class="task-one__item" style="width: 100%">
                <span class="task-one__label">注册日期：</span>
                <el-date-picker
                    v-model="area_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="form_loading" @click="handleImprot">确认导出</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import TitleMore from "@components/title-more.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getLevelAndTag()
})

/**
 * 导出
 * @param {String} pay_status // 是否消费：1是，0否
 * @param {String} area_time // 注册日期
 * @param {String} black_status 会员状态，[0:正常,1:已拉黑]
 * @param {Function} handleImprot // 确认导出
 */
const form_loading = ref(false) // 公共表单按钮提交状态
const pay_status = ref("1") // 0没有消费，1是消费 
const black_status = ref("0") // 0正常，1已拉黑 
const area_time = ref("")
const handleImprot = () => {
    proxy.$axios
        .get("user/userExport", {
            params: {
                is_sales: pay_status.value,
                grade_id: level_id.value, // 等级ID
                tag_id: tag_id.value,  // 标签ID
                black_status: black_status.value,
                s_time: area_time.value ? area_time.value[0] : "",
                l_time: area_time.value ? area_time.value[1] : "",
            },
            responseType: "blob",
        })
        .then((res) => {
            let contentDisposition = res.headers["content-disposition"]
            let filename = decodeURI(contentDisposition.split("fileName=")[1] || contentDisposition.split("filename=")[1])
            let blob = new Blob([res.data], { type: res.headers["content-type"] })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement("a")
            link.href = url
            link.download = filename
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(url) // 释放内存
            document.body.removeChild(link)
        })
        .catch((err) => {})
}

/**
 * 会员等级和标签
 * @param {String} level_id 会员等级ID
 * @param {String} tag_id 标签ID
 */
const level_id = ref("")
const level_arrs = ref([])
const tag_id = ref("")
const tag_arrs = ref([])
function getLevelAndTag() {
    proxy.$axios
        .get("user/search")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                tag_arrs.value = result.tag_list
                level_arrs.value = result.grade_list
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
</script>

<script>
export default {
    name: "MemberImport",
}
</script>

<style lang="less" scoped>
.task-one__btn {
    margin-top: @margin-mdl;
}
</style>
